<template>
	<view class="container">
		<u-sticky>
			<view class="tabs_box">
				<!-- 搜索栏优化：增加圆角、调整间距 -->
				<view class="tabs_box_search">
					<u-search :showAction="true" actionText="搜索" :animation="true" v-model="query.productNo"
						placeholder="请输入工号" @custom="getList(false)" @search="getList(false)" @clear="getList(false)"
						borderRadius="16rpx"></u-search>
				</view>
			</view>
		</u-sticky>

		<!-- 列表卡片优化：增加阴影、圆角、内边距 -->
		<view class="list_card" v-for="item in list" :key="item.productId" @click="handleProduct(item)">
			<view class="list_card_check">
				<radio :value="item.productId" :checked="isCheck(item.productId)" />
			</view>
			<view class="list_card_con">
				<view class="list_item">
					<view class="list_item_left">工号</view>
					<view class="list_item_right">{{item.productNo}}</view>
				</view>
				<view class="list_item">
					<view class="list_item_left">产品类型</view>
					<view class="list_item_right">
						<dicts-tag v-if="dictList['service_product_type'] && item.productType"
							:list="dictList['service_product_type']" :value="item.productType"></dicts-tag>
					</view>
				</view>
				<view class="list_item">
					<view class="list_item_left">电压等级</view>
					<view class="list_item_right">
						<view class="list_item_right">{{item.templateName}}</view>
						<!-- <dicts-tag  v-if="dictList['service_voltage_type'] && item.templateId" :list="dictList['service_voltage_type']" :value="item.templateId"></dicts-tag> -->
					</view>
				</view>
				<view class="list_item">
					<view class="list_item_left">型号</view>
					<view class="list_item_right">{{item.model}}</view>
				</view>
			</view>
		</view>
		<u-empty mode="list" style="padding-top: 100rpx;" text="暂无数据" v-if="!list.length">
		</u-empty>
		<bottom-button @click="submit" text="确定"></bottom-button>
	</view>
</template>

<script>
	import {
		getProductList,
		getDicts,
		workList
	} from "@/common/api.js"
	import dictsTag from "@/components/dictsTag.vue"
	import bottomButton from "@/components/bottomButton.vue"
	import dicts from '@/mixins/dicts.js'
	import {
		mapState,
		mapMutations,
		mapActions,
		mapGetters
	} from 'vuex';
	export default {
		mixins: [dicts],
		components: {
			dictsTag,
			bottomButton
		},
		computed: {
			...mapState('problemInfo', [
				'projectInfo', // 映射整个projectInfo对象
				'productInfo' // 映射整个productInfo对象
			]),
		},
		data() {
			return {
				checkType: 'check',
				pageType: '1', // 1 跳转  2 返回
				query: {
					__page: 1,
					__limit: 10,
					productNo: '',
				},
				loading: false,
				total: 0,
				list: [],
				currentIndex: 0,
				dictList: {},
				checkData: [],
			}
		},
		onReachBottom() {
			if (this.query.__page * this.query.__limit < this.total) {
				this.loading = true
				this.$commonFn.debounce(this.getList, 500, true)
			} else {
				this.$commonFn.msg('已经到底了')
				this.loading = false
			}
		},
		onBackPress(options) {
			uni.reLaunch({
				url: '/pages/index/index'
			});
			// console.log('from:' + options.from)
		},
		onLoad(e) {
			// radio
			// this.checkType = e.checkType || 'check'
			this.pageType = e.pageType || '1'
		},
		onShow() {
			this.getList()
			this.getDictsList('service_product_type')
			this.getDictsList('service_voltage_type')
		},
		methods: {
			// 映射模块的mutations
			...mapMutations('problemInfo', ['SET_PRODUCT_INFO', 'CLEAR_PROJECT_INFO', 'CLEAR_PRODUCT_INFO']),
			async getDictsList(dictType) {
				let res = await getDicts({
					dictType: dictType
				})
				if (res) {
					this.dictList[dictType] = res.data
				}
			},
			async getList(isRefresh = false) {

				let res = await workList({
					...this.query,
					projectId: this.projectInfo.projectId || ''
				})
				if (res && res.data) {
					this.list = res.data || []
				}
				if (this.list && this.list.length === 0) {
					this.CLEAR_PROJECT_INFO()
					this.CLEAR_PRODUCT_INFO()
				}
			},

			handleConfirm(e) {
				this.getList()
			},
			isCheck(value) {
				let index = this.checkData.findIndex(c_item => c_item.productId === value);
				return index !== -1 ? true : false
			},
			handleProduct(item) {
				if (this.checkType === 'radio') {
					this.checkData = [item]
				} else {
					let index = this.checkData.findIndex(c_item => c_item.productId === item.productId);
					if (index !== -1) {
						this.checkData.splice(index, 1);
					} else {
						this.checkData.push(item);
					}
					// console.log(this.checkData,'this.checkData')
				}
				// uni.$emit('updateProduct', item)
				// this.$commonFn.Navback()
			},
			submit() {
				let that = this
				this.SET_PRODUCT_INFO(that.checkData)
				if (that.pageType == '1') {
					// this.$commonFn.Navto(`/pages/problem/addQuestion`)

					uni.reLaunch({
						url: '/pages/problem/addQuestion'
					});
				} else {
					this.$commonFn.Navback()
				}
			},
		}
	}
</script>
<style scoped lang="scss">
	.container {
		padding-bottom: 32rpx;
		background-color: #f5f7fa; // 页面背景色，增强层次感
	}

	.tabs_box_search {
		padding: 16rpx 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tabs_box {
		background-color: #fff;
		position: sticky;
		position: -webkit-sticky;
		top: 0;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); // 顶部栏阴影
	}

	// 列表卡片样式
	.list_card {
		margin: 24rpx;
		display: flex;
		align-items: center;

		&_check {
			// width: 48rpx;
			// height: 48rpx;
			padding-right: 16rpx;
		}

		&_con {
			background-color: #fff;
			flex: 1;
			padding: 24rpx;
			border-radius: 12rpx;
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08); // 卡片阴影

		}
	}

	// 列表项样式
	.list_item {
		display: flex;
		justify-content: space-between;
		padding-bottom: 20rpx;
		// border-bottom: 1rpx solid #eee; // 分隔线
		// margin-bottom: 20rpx;

		&:last-child {
			padding-bottom: 0;
			border-bottom: none;
			margin-bottom: 0;
		}

		&_left {
			font-weight: 500;
			color: #666;
			flex-shrink: 0;
			padding-right: 26rpx;
		}

		&_right {
			color: #333;
		}
	}

	// 按钮样式
	.list_btn {
		display: flex;
		justify-content: center;
		margin-top: 32rpx;
	}

	// 按钮 hover 效果
	.btn_hover {
		opacity: 0.8;
		transform: scale(0.98);
		transition: all 0.2s ease;
	}

	// 覆盖 u-button 样式，保证宽度和高度一致性
	.list_btn ::v-deep .u-button {
		width: 160rpx !important;
		height: 80rpx !important;
		line-height: 80rpx !important;
		border-radius: 8rpx;
	}
</style>